import React, { PureComponent } from 'react'
import PropTypes from 'prop-types';
import {Input, Popover} from "antd";
import { CheckCircleFilled } from '@ant-design/icons'
import {getParentNode} from "@utils/DOMUtils";
import notify from "@utils/tip";


const themeColorList = [{
    value: '#F4520B',
}, {
    value: '#CF8668',
}, {
    value: '#F9BC23',
}, {
    value: '#EA0B26',
}, {
    value: '#1F9B51',
}, {
    value: '#49A292',
}, {
    value: '#27A0FF',
}, {
    value: '#3B49DF',
}, {
    value: '#353235',
}, {
    value: '#e5e5e5',
}]

class ColorChoosePopover extends PureComponent {
    static propTypes = {
        onChange: PropTypes.func,
        value: PropTypes.string
    }

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            inputValue: '',
        }

        this.handleColorChange = this.handleColorChange.bind(this)
        this.handleCustomColorChange = this.handleCustomColorChange.bind(this)
        this.inputChange = this.inputChange.bind(this)
        this.renderTabbarPopover = this.renderTabbarPopover.bind(this)
        this.resetColor = this.resetColor.bind(this)
        this.toggleVisible = this.toggleVisible.bind(this)
    }

    handleColorChange (e) {
        const value = e.currentTarget.dataset.color
        this.props.onChange(value)
        this.toggleVisible(false)
    }

    handleCustomColorChange () {
        const { inputValue } = this.state
        if (!/^#[0-9a-fA-F]{6}$/.test(inputValue)) {
            notify('请输入正确的色值', 'error')
            return ;
        }
        this.props.onChange(inputValue)
        this.toggleVisible(false)
    }

    toggleVisible (visible) {
        this.setState({
            visible
        })
    }

    inputChange (e) {
        const value = e.currentTarget.value
        this.setState({
            inputValue: value.includes('#') ? value : `#${value}`
        })
    }

    renderTabbarPopover () {
        const { value } = this.props
        const { inputValue } = this.state
        return (
            <div className="tabbar-color-radio-container">
                { themeColorList.map(color => (
                    <div key={ color.value }
                         data-color={ color.value }
                         className={`color-radio-item${value === color.value ? ' selected' : ''}`}
                         onClick={this.handleColorChange}
                    >
                        <div className="color-preview" style={{backgroundColor: color.value}} />
                        {/*<div className="color-name">{ color.name }</div>*/}
                        <CheckCircleFilled className="selected-icon" />
                    </div>
                )) }
                <Input className='color-input'
                       onChange={this.inputChange}
                       onPressEnter={this.handleCustomColorChange}
                       placeholder="#请输入色值"
                       value={inputValue}
                />
            </div>
        )
    }

    resetColor () {
        this.props.onChange('#999999')
    }

    render () {
        const { value } = this.props
        const { visible } = this.state
        return (
            <div className="tabbar-color-radio-preview">
                <Popover
                    title=""
                    content={this.renderTabbarPopover()}
                    trigger="click"
                    getPopupContainer={ele => getParentNode(ele, 'operation-container')}
                    onVisibleChange={this.toggleVisible}
                    visible={visible}
                >
                    <span className='color-preview' style={{backgroundColor: value}} />
                </Popover>
                <span className='reset-button' onClick={this.resetColor} >重置</span>
            </div>
        )
    }
}

export default ColorChoosePopover